import React from 'react';
import { Modal, Button,Divider,Input,Radio  } from 'antd';
import './index.css'
import { DatePicker } from 'antd';
const RadioGroup = Radio.Group;

const RangePicker = DatePicker.RangePicker;


export default class ExtractModel extends React.Component {
    constructor(){
        super();
    }
     onChange(dates, dateStrings) {
        console.log('From: ', dates[0], ', to: ', dates[1]);
        console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
      }
    render() {
        return (
            <div>
        
            <Modal
              title="云视频提取"
              visible={this.props.visible}
              onOk={this.handleOk}
              wrapClassName="extractList"
              onCancel={()=>this.props.showModel()}
            >
             <div>
                 <Button style={{width :'80%',marginLeft:'10%' }} type="primary">新增提取</Button>
                 <div style={{width :'80%',marginLeft:'10%',paddingTop:'15px'}}>
                     <ul className='fontSize' >
                         <li style={{paddingTop:'5px'}}>开始时间：2018/3/21</li>
                         <li style={{paddingTop:'5px'}}>结束时间：2018/3/21</li>
                         <li style={{paddingTop:'5px'}}><span>支付状态：已支付，已取消，已发送</span><span style={{marginLeft:'20%'}}>申请人：xxx</span> </li>
                     </ul>
                 </div>
                 <Divider />
                 <div  style={{width :'80%',marginLeft:'10%' }}>
                 <RangePicker
                        showTime={true}
                        format="YYYY/MM/DD HH:mm"
                        onChange={this.onChange}
                        />
                        <div style={{paddingBottom:'15px',paddingTop:'15px'}}>提取时常12小时42分5秒，云存费用15元</div>
                        <Input placeholder="申请人姓名"  style={{marginBottom:'15px'}}/>
                        <Input placeholder="请输入联系电话" style={{marginBottom:'15px'}}/>
                        <Input placeholder="请输入接收视频的邮箱地址" style={{marginBottom:'15px'}}/>
                        <div>
                        <span style={{paddingRight :'15px'}}>支付方式</span>
                        <RadioGroup name="radiogroup" defaultValue={1}>
                        <Radio value={1}>微信</Radio>
                        <Radio value={2}>支付宝</Radio>
                        <Radio value={3}>余额</Radio>
                        </RadioGroup>          
                        </div>
                    </div>
             </div>
            </Modal>
          </div>
        );
    }
}